<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<!--
下拉菜单
  使用 .dropdown 进行下拉菜单
  设置下拉按钮 btn dropdown-toggle data-bs-toggle=dropdown
  下拉菜单 dropdown-menu
  .dropdown 类指示下拉菜单。
  如需打开下拉菜单，请使用设置了 .dropdown-toggle 类和 data-toggle="dropdown" 属性的按钮或链接。
  将 .dropdown-menu 类添加到 <div> 元素，可实际构建下拉菜单。然后将 .dropdown-item 类添加到下拉菜单中的每个元素（链接或按钮）。



-->
<body>
<div class="container mt-3">
  <h2>下拉列表</h2>
  <p>.dropdown 类指示下拉菜单。</p>
  <p>请使用 .dropdown-menu 类来实际构建下拉菜单。</p>
  <p>如需打开下拉菜单，请使用设置了 .dropdown-toggle 类和 data-toggle="dropdown" 属性的按钮或链接。</p>
  <p>下拉菜单分割线 使用 .dropdown-divider 类通过水平细边框分隔下拉菜单中的链接</p>
  <p>下拉列表标题 .dropdown-header 类用于在下拉菜单中添加标题</p>
  <p>.active 类突出显示特定的下拉项 添加背景色蓝色</p>
  <p>.disabled 类 在悬停时获得浅灰色文本颜色 和no-parking-sign 图标</p>
  <p>下拉列表位置 将.dropend 或.dropstart 类添加下拉元素 来创建dropend 或dropstart 主要是针对下拉角标方向</p>
  <p>下拉列表右对齐 .dropdowm-menu-end 类添加到带有 .dropdown-menu的元素</p>
  <p>上拉列表 将class=dropdown 的div元素更改为dropup</p>
  <p>下拉文本 .dropdown-item-text 类用于为下拉项添加纯文本 或用于为链接添加默认链接样式</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉列表
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
      <li><h5 class="dropdown-header">下拉查看链接</h5></li>
      <li><a class="dropdown-item" href="#">链接 1</a></li>
      <li><a class="dropdown-item active" href="#">链接 2</a></li>
      <li><a class="dropdown-item disabled" href="#">链接 3</a></li>
      <li><a class="dropdown-item-text" href="#">文本链接</a></li>
      <li><span class="dropdown-item-text">纯文本</span></li>
      <li>
        <hr class="dropdown-divider">
        链接 4
      </li>
    </ul>
  </div>
</div>
<div class="container mt-3">
  <h2>组合按钮和下拉列表</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">华为</button>
    <button type="button" class="btn btn-primary">大疆</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">手机</a></li>
        <li><a class="dropdown-item" href="#">平板电脑</a></li>
      </ul>
    </div>
  </div>
  <h2>垂直组合按钮和下拉列表</h2>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">华为</button>
    <button type="button" class="btn btn-primary">大疆</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">手机</a></li>
        <li><a class="dropdown-item" href="#">平板电脑</a></li>
      </ul>
    </div>
  </div>
  <br>
  <h5>折叠 :需要隐藏和显示大量内容时 可以使用折叠组件</h5>
  <p>.collapse 类指示可折叠元素（在我们的例子中为 div）;</p>
  <p>通过单击按钮，可显示或隐藏的内容。 如需控制（显示/隐藏）可折叠内容，请将 data-bs-toggle="collapse" 属性添加到 a或
    button元素。然后添加 data-bs-target="#id" 属性来连接按钮和可折叠内容（div id="demo"）。</p>
  <p>注释：对于 a 元素，您可以使用 href 属性代替 data-bs-target 属性：</p>
  <p>默认情况下,可折叠内容是隐藏的.但是可以添加.show类来默认显示内容</p>
  <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">春日</button>
  <!--  <a href="#demo" data-bs-target="collapse">春日</a>-->
  <div id="demo" class="collapse">
    <p>胜日寻芳泗水滨，无边光景一时新。</p>
    <p>等闲识得东风面，万紫千红总是春。</p>
  </div>
  <h5>折叠扩展</h5>
  <p>使用data-bs-parent 属性确保当显示可折叠项目之一时,会关闭指定父项下所有可折叠元素</p>
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
          可折叠组项目 #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
        <div class="card-body">
          <h3>春日</h3>
          <p>胜日寻芳泗水滨，无边光景一时新。</p>
          <p>等闲识得东风面，万紫千红总是春。</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
          可折叠组项目 #2
        </a>
      </div>
      <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
        <div class="card-body">
          <h3>初夏绝句</h3>
          <p>纷纷红紫已成尘，布谷声中夏令新。</p>
          <p>夹路桑麻行不尽，始知身是太平人。</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
          可折叠组项目 #3
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
        <div class="card-body">
          <h3>山行</h3>
          <p>远上寒山石径斜，白云生处有人家。</p>
          <p>停车坐爱枫林晚，霜叶红于二月花。</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container mt-3">
  <h5>导航菜单</h5>
  <p>要创建简单的水平菜单,请将.nav类添加到 ul元素 ,然后为每个li 元素 添加 .nav-item并将 .nav-link类加到对应的链接</p>
  <p>对齐导航栏 .justify-content-center 类使得导航居中 , .justify-content-end 类使导航右对齐.</p>
  <p>垂直导航栏 .flex-column 类可创建垂直导航</p>
  <p>选项卡 使用.nav-tabs类 将导航菜单转换为导航选项卡 ,并将 .active 类添加到活动/当前链接</p>
  <p>使用.nav-pills类可将导航菜单设置为导航胶囊</p>
  <p>使用.nav-justified类等宽对齐标签/胶囊</p>
  <ul class="nav nav-pills nav-justified justify-content-center">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="pill" href="#">活动</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" data-bs-toggle="pill" href="#">链接 1</a></li>
        <li><a class="dropdown-item" data-bs-toggle="pill" href="#">链接 2</a></li>
        <li><a class="dropdown-item" data-bs-toggle="pill" href="#">链接 3</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="pill" href="#">链接</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" data-bs-toggle="pill" href="#">禁用</a>
    </li>
  </ul>
  <br>
  <h2>可切换/动态胶囊导航</h2>
  <!--导航胶囊 -->
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="pill" href="#home">春日</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="pill" href="#menu1">初夏</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="pill" href="#menu2">山行</a>
    </li>
  </ul>

  <!-- 选项卡窗格 -->
  <div class="tab-content">
    <div class="tab-pane container active" id="home">...</div>
    <div class="tab-pane container fade" id="menu1">...</div>
    <div class="tab-pane container fade" id="menu2">...</div>
  </div>
</div>
<div class="container mt-3">
  <h2>导航栏</h2>
  <p>导航栏是位于页面顶部的导航页眉,导航栏可以扩展或折叠,具体取决于屏幕大小</p>
  <p>使用.navbar类创建标准导航栏,然后是响应折叠类
    .navbar-expand-xxl|xl|lg|md|sm（在特大、超大、大、中型设备上水平排列，或小屏幕上垂直堆叠导航栏）</p>
  <p>如需在导航栏中添加链接，请使用 class="navbar-nav" 的 ul 元素（或 div）。然后添加带有 .nav-item 类的 li 元素，后跟带有
    .nav-link 类的 a 元素：</p>
  <p>删除 .navbar-expand-*类可创建始终垂直的导航栏</p>
  <p>justify-content-center 类可将导航栏居中</p>
  <p>使用 .navbar-dark 类为导航栏中的所有链接添加白色文本颜色，或使用 .navbar-light 类添加黑色文本颜色。</p>
  <p>class="navbar navbar-expand-sm bg-primary navbar-dark 黑色背景,白色文本</p>
  <p>class="navbar navbar-expand-sm bg-dark navbar-dark 蓝色背景,白色文本</p>
  <p>活动/禁用状态：将 .active 类添加到 a 元素可突出显示当前链接，或添加 .disabled 类来指示链接不可点击。</p>
  <p>品牌标志 .navbar-brand 类用于突出显示页面的品牌/标志/项目名称</p>
  <p>导航栏固定在页面顶部 或底部  固定导航栏会独立于页面滚动的固定位置</p>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top justify-content-end">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <!--图标-->
<!--        <img src="/img/1.jpg" alt="Avatar Logo" style="width: 40px;" class="rounded-pill">-->
        Logo
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-text">
        导航栏文本
      </div>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">链接 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接 3</a>
          </li>
        </ul>
        <form class="d-flex">
          <label>
            <input class="form-control me-2" type="text" placeholder="Search">
          </label>
          <button class="btn btn-primary" type="button">Search</button>
        </form>
      </div>
    </div>
  </nav>
</div>
</body>
</html>
